<template>
  <el-button @click="refresh()">refresh</el-button>
  <el-text class="mx-1">支付宝用户名:vkdvhu6000@sandbox.com</el-text>
  <el-text class="mx-1">密码和支付密码:111111</el-text>
  <el-text class="mx-1">  订单1分钟后自动关闭</el-text>
  <el-button @click="download()">下载</el-button>

  <div class="example-pagination-block">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="index" width="180" />
      <el-table-column prop="business_id" label="订单号" width="180" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="sum_money" label="总价" width="180"/>
      <el-table-column prop="date" label="创建日期" />
      <!-- <el-table-column prop="payed" label="支付状态" /> -->
      <el-table-column label="Operations">
        <!-- scope is row data -->
        <template #default="scope">
          <el-button v-if="scope.row.bs_state == 0" size="small" @click="pay(scope.row.business_id)">pay</el-button>
          <el-button v-else-if="scope.row.bs_state == 1" size="small" disabled>已支付</el-button>
          <el-button v-else-if="scope.row.bs_state == 2" size="small" disabled>订单被取消</el-button>
          <el-button v-else-if="scope.row.bs_state == 3" size="small" disabled>订单超时</el-button>
          <el-button v-else-if="scope.row.bs_state == 4" size="small" disabled>正在取消</el-button>
          <el-button v-else size="small" disabled>未知状态</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- https://element-plus.org/zh-CN/component/pagination.html#%E9%99%84%E5%8A%A0%E5%8A%9F%E8%83%BD -->
    <el-pagination layout="prev, pager, next" :total="page_obj.total" :hide-on-single-page="tableData.length > 0"
      v-model:current-page="page_obj.current_page" v-model:page-size="page_obj.page_size" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script setup>
import { inject } from 'vue';
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { fetch_x ,fetch_blob} from '/src/api/fetch_wrapper.js'

const server_host = inject('h');

const page_obj = ref({ current_page: 1, page_size: 7 ,total:0});
const tableData = ref([]);

async function refresh({current_page=1,page_size=8}=page_obj.value) {
  try {
    const s = await fetch_x(server_host + "/sg-oss/trade/order/page", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body:JSON.stringify({current_page,page_size})
    });
    tableData.value = s.records;
    page_obj.value.total=s.total;

  } catch (e) {
    console.log(e);
  }
}
refresh();

async function download({current_page=1,page_size=8}=page_obj.value) {
  let blob=null;
  try {
    blob = await fetch_blob(server_host + "/sg-oss/trade/order/page/download", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body:JSON.stringify({current_page,page_size})
    });
  } catch (e) {
    console.log(e);
    throw e;
  }
  //也可参考https://zh.javascript.info/fetch-progress
  // const chunk=[];
  // for await(const i of body){
  //   chunk.push(i);
  // }
  // const bb=new Blob(chunk,{type:"application/octet-stream"});

  //也可以使用库exceljs https://www.cuiliangblog.cn/detail/article/80

  const a = document.createElement('a');
  const href = window.URL.createObjectURL(blob);
  a.href = href;
	a.download = `order${new Date().toLocaleDateString()}.xlsx`;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a); // 下载完移除元素
	window.URL.revokeObjectURL(href); // 释放掉blob对象
}

async function pay(order_id) {
    const s = await fetch_x(server_host + "/pay/ali/alipay_page", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ order_id, return_url: window.location.origin + "/console#/order" })
    });
      document.write(s);
}

const handleSizeChange = (page_size) => {
  console.log(`${page_size} items per page`)
  page_obj.value.page_size=page_size;
  refresh(page_obj.value);
}
const handleCurrentChange = (current_page) => {
  console.log(`current page: ${current_page}`)
  page_obj.value.current_page=current_page;
  refresh(page_obj.value);
}


</script>
<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
  